<template>
    <view class="main">
        <view class="desc ">
            <view class="title dispaly-center common">
                <view class="text">问题描述</view>
                <text class="x">*</text>
            </view>
            <view class="ipt">
                <textarea v-model="formData.content" class="com-ipt ipt" placeholder="请描述您遇到的问题"></textarea>
            </view>
        </view>
        <view class="upload">
            <view class="title dispaly-center common">
                <view class="text">图片上传（最多3张）</view>
            </view>
            <view class="up-com">
                <UploadImage :limit="3" @upload="data => formData.imgs = data" />
            </view>
        </view>
        <view class="desc">
            <view class="title dispaly-center common">
                <view class="text">联系方式</view>
            </view>
            <view class="">
                <input v-model="formData.contact" placeholder="请输入" class="com-ipt h-100" maxlength="11"
                    type="number" />
            </view>
        </view>

        <view class="btn-box1 w-100 dispaly-align-center">
            <view class="btn1 dispaly-align-center" @click="submit">提交</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import UploadImage from '@/components/uploadImage/uploadImage.vue'
import { reactive } from 'vue'
import type { RequestFeedBackType } from '@/types/requstParm'
import { feedback } from '@/api/home/home'


const formData = reactive<RequestFeedBackType>({
    user_id: 3,
    imgs: '',
    contact: '',
    content: ''
})

const submit = async () => {
    const res = await feedback(formData)
    if (res.code == 0) {
        uni.showToast({
            title: res.msg as string,
            icon: 'none'
        })
        setTimeout(() => {
            uni.navigateBack()
        }, 1000)
    }
}
</script>

<style>
page {
    background-color: #f4f4f6;
}
</style>

<style lang="scss" scoped>
.btn-box1 {
    position: fixed;
    bottom: 97rpx;
    left: 0;
    right: 0;

    .btn1 {
        width: 523rpx;
        height: 84rpx;
        background: #008298;
        border-radius: 12rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFFFFF;
    }
}

.common {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
    margin-bottom: 20rpx
}

.com-ipt {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 20rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #7E7E7E;
}

.main {
    padding: 19rpx 30rpx;

    .desc {
        margin-bottom: 33rpx;

        .x {
            color: #FF0C0C;
        }
    }

    .ipt {
        height: 199rpx;
        width: 100%;
    }
}
</style>